<template>
  <div class="profile">
    <div class="profile-top">
      <div class="profile-info" @click="jump(!!userInfo.id)">
        <van-image
          :src="userInfo.id ? avatar : require('./images/cat.jpeg')"
          round
          width="50"
          height="50"
        />
        <div class="profile-text">{{ userInfo.id ? userInfo.realName : '请登录' }}</div>
      </div>
    </div>
    <div class="profile-content">
      <van-cell
        title="我的收藏"
        icon="star-o"
        is-link
        @click="goTo('/collect')"/>
      <van-cell
        title="最近浏览"
        icon="todo-list-o"
        is-link
        @click="goTo('/browse')"/>
      <van-cell
        v-if="userInfo.id"
        title="修改密码"
        icon="setting-o"
        is-link
        @click="showDialog"/>
    </div>
    <div v-if="userInfo.id" class="profile-login-out">
      <van-button type="danger" size="large" @click="loginOut">退出登录</van-button>
    </div>
    <ModificationDialog :show="show" title="修改密码" @handleCancel="handleCancel" @dialogClosed="dialogClosed" @dialogConfirm="dialogConfirm">
      <template slot="oldPwd">
        <!--        <van-field
          v-model="oldPwd"
          :error-message="errorMsg[0]"
          type="password"
          name="userPassword"
          label="原始密码"
          placeholder="请填写原始密码"
          clearable
          right-icon="question-o"
          @click-right-icon="$toast('密码必须由英文、数字或字符组成，最少6位，最多18位')"
          @input="checkPwd(oldPwd,0)"
        />-->
        <van-field
          v-model="oldPwd"
          type="password"
          name="userPassword"
          label="原始密码"
          placeholder="请填写原始密码"
          clearable
          right-icon="question-o"
          @click-right-icon="$toast('密码必须由英文、数字或字符组成，最少6位，最多18位')"
        />
      </template>
      <template slot="newPwd">
        <van-field
          v-model="newPwd"
          :error-message="errorMsg[1]"
          type="password"
          name="userPassword"
          label="新密码"
          placeholder="请填写新密码"
          clearable
          right-icon="question-o"
          @click-right-icon="$toast('密码必须由英文、数字或字符组成，最少6位，最多18位')"
          @input="checkPwd(newPwd,1)"
        />
      </template>
    </ModificationDialog>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import { Toast, Dialog } from 'vant'
import avatar from './images/avatar.png'
import { clearlocalStorage } from '@/utils/auth'
import { userLoginOut } from '@/api/user'
import ModificationDialog from '@/components/Dialog/Dialog'
import CustomDialog from '@/components/CustomDialog/CustomDialog'
import { pwdReg } from '@/utils/validation_rule'
import { updatePassword } from '@/api/user'
import JsMd5 from '@/utils/js-md5'

export default {
  name: 'Profile',
  components: {
    ModificationDialog,
    CustomDialog
  },
  data() {
    return {
      avatar,
      userName: '',
      show: false,
      userPassword: '',
      title: '',
      message: '',
      showPwdInfo: false,
      pwdMessage: '',
      errorMsg: [],
      newPwd: '',
      oldPwd: ''
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  created() {
    this.avatar = this.userInfo.userPicture
  },
  mounted() {
  },
  methods: {
    ...mapActions('user', ['removeUserInfo']),
    jump(goWhere) {
      if (goWhere) {
        this.$router.push('/profileDetail')
      } else {
        this.$router.push('/login')
      }
    },
    loginOut() {
      Dialog.confirm({ message: '是否确认退出登陆?' })
        .then(async() => {
          const { code } = await userLoginOut({})
          if (code === 0) {
            clearlocalStorage()
            this.removeUserInfo()
            Toast.success('退出成功')
          } else {
            Toast.fail('退出失败')
          }
        })
        .catch(() => {
        })
    },
    goTo(path) {
      if (this.userInfo.id) {
        this.$router.push(path)
      } else {
        Dialog.confirm({
          title: '提示',
          message: '请先登录'
        })
          .then(() => {
            this.$router.push('/login')
          })
          .catch(() => {
            console.log('error')
          })
      }
    },
    showDialog() {
      this.show = true
    },
    handleCancel(event) {
      this.show = event
    },
    patternUserPassword(val) {
      return pwdReg(val)
    },
    checkPwd(value, index) {
      if (pwdReg(value)) {
        this.errorMsg[index] = ''
      } else {
        this.errorMsg[index] = '请填写正确格式的密码'
      }
    },
    dialogClosed() {
      Object.assign(this.$data, this.$options.data())
    },
    async dialogConfirm() {
      const { userName } = this.userInfo
      const { newPwd, oldPwd } = this.$data
      const { code, msg } = await updatePassword({ userName, password: JsMd5.encryption(oldPwd), newPassword: JsMd5.encryption(newPwd) })
      const type = code === 0 ? 'success' : 'fail'
      Toast({
        type,
        message: msg,
        position: 'bottom'
      })
    }
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">
.profile {
  height: 100%;
  background-color: #F0F0F0;

  .profile-top {
    display: flex;
    justify-content: center;
    height: 134px;
    background: url("./images/bg.png") no-repeat;
    background-size: 100% 134px;

    .profile-info {
      height: 100%;
      text-align: center;
      margin-top: 24px;

      .profile-text {
        padding: 5px;
        color: #ffffff;
        border-radius: 10px;
        text-align: center;
        background-color: #58B5EE;
        font-size: 16px;
        box-sizing: border-box;
      }
    }

  }

  .profile-content {
    /deep/ .van-icon {
      line-height: 24px;
    }
  }

  .profile-login-out {
    margin: 40px 0 25px 0;
  }
}
</style>
